<template>
  <div id="app">
   <Dog
v-for="(item,index) in arr"
:key="index"
:dogImgUrl="item.dogImgUrl"
:dogName="item.dogName"
:index="index"
@subdog="changeColor"
   />
   <p>
       您喜欢的狗狗如下：
   </p>
   <ul class="dog">
       <li v-for="(item,index) in lovedog" :key="index">
           {{ item.dogName }}
       </li>
   </ul>
  </div>
</template>

<script>

import Dog from './components/Dog.vue'
export default {
  name: 'App',
  data(){
      return {
          arr:[
    {
        dogImgUrl:
        "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
        dogName: "博美",
    },
    {
        dogImgUrl:
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1224576619,1307855467&fm=26&gp=0.jpg",
        dogName: "泰迪",
    },
    {
        dogImgUrl:
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2967740259,1518632757&fm=26&gp=0.jpg",
        dogName: "金毛",
    },
    {
        dogImgUrl:
        "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
        dogName: "哈士奇",
    },
    {
        dogImgUrl:
        "https://img0.baidu.com/it/u=400646052,680362924&fm=26&fmt=auto",
        dogName: "阿拉斯加",
    },
    {
        dogImgUrl:
        "https://img2.baidu.com/it/u=1271146355,661067452&fm=26&fmt=auto",
        dogName: "萨摩耶",
    },
],
lovedog:[]
      }
  },
  components:{
      Dog
  },
  methods: {
      changeColor(index){
          console.log('点击了');
        this.lovedog.push({
            dogName: this.arr[index].dogName
        }) 
      }
  },
}
</script>

<style>
#app{
    width: 70%;
    margin: 0 auto;
}

</style>
